<template>
  <div class="oj-root-main">
    <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
      <el-menu-item index="0" :width="180" @click="reload()">
        <el-image
            style="width: 180px; height: 52px;"
            :src="require('@/assets/index-6.png')"
            fit="fit" ></el-image>
      </el-menu-item>
      <el-menu-item index="1" :width="100"> <i class="fa fa-home fa-lg"></i> {{$t('home')}}</el-menu-item>
      <el-menu-item index="2"><i class="fa fa-th fa-lg"></i> {{$t('problem')}}</el-menu-item>
      <el-menu-item index="3"><i class="fa fa-trophy fa-lg"></i> {{$t('contest')}}</el-menu-item>
      <el-menu-item index="4"><i class="fa el-icon-s-marketing fa-lg"></i> {{$t('status')}}</el-menu-item>
      <el-menu-item index="5"><i class="fa fa-comments fa-lg"></i> {{$t('comment')}}</el-menu-item>
      <el-menu-item v-if="isRoot()" index="6"><i class="fa fa-user fa-lg"></i> {{$t('user')}}</el-menu-item>

      <el-submenu style="float: right;margin-right: -5px;" index="7" v-if="isLogin()" class="my-avatar">
        <template slot="title" >
          <el-avatar @click="homepage()" size="large" :src="'/api/user/download/'+loginUser.avatarId"></el-avatar>
        </template>
        <el-menu-item index="7-1"  @click="homepage()"><i class="fa fa-user-circle fa-lg"></i> 个人主页</el-menu-item>
        <el-menu-item index="7-3"  @click="$router.push('/main/user/notice')"><i class="fa fa-commenting fa-lg"></i>
          消息
          </el-menu-item>
        <el-menu-item index="7-4"  @click="$router.push('/main/user/settings')"><i class="fa el-icon-s-tools fa-lg"></i>
          设置
        </el-menu-item>
        <el-menu-item index="7-2"  @click="unLogin()"><i class="fa fa-sign-out fa-lg"></i> {{$t('unLogin')}}</el-menu-item>
      </el-submenu>

<!--      <el-menu-item index="5"><i class="fa fa-comments fa-lg"></i> {{$t('comment')}}</el-menu-item>-->

      <el-submenu style="float: right;margin-right: -15px;" index="">
        <template slot="title" >{{$t('language')}}</template>
        <el-menu-item  @click="changeLange('zh-cn')">简体中文</el-menu-item>
        <el-menu-item  @click="changeLange('en')">English</el-menu-item>
      </el-submenu>
      <el-menu-item style="float: right;margin-right: -15px;" index="8" v-if="!isLogin()" @click="$router.push('/login')">
        {{$t('login')}}
      </el-menu-item>
    </el-menu>
    <div class="workspace-1">
      <!-- <div class="workspace-2"> -->
      <div class="workspace-2">
        <router-view></router-view>
      </div>



    <!-- </div> -->
      <div class="root-footer">

        Copyright © 2019-2023 OnlineJudge Graduation Project. 备案号：豫HPU备311909011021号-1
      </div>
    </div>

  </div>

</template>

<script lang="ts">
import {isRoot,isLogin,loginUser,removeToken} from '@/utils/auth'
import * as contestApi from '@/api/contest'
export default {
  name: 'Main',
  data() {
    return {
      activeIndex: '1',
      loginUser:loginUser(),
      registeredContestList:[],
      myVar:null,  //计时循环事件
    };
  },
  mounted(){
    this.$nextTick(function () {
      // console.log(this.$el.textContent) // => '修改后的值'
      //隐藏
      let i = window.document.getElementsByClassName("my-avatar")[0];
      if(i){
        let j = i.getElementsByClassName("el-submenu__icon-arrow el-icon-arrow-down")[0];
        if(j)j.setAttribute("style","display:none")
      }

    })
  },
  beforeDestroy(){  //销毁
    if(this.myVar)clearInterval(this.myVar);
  },
  //生命周期函数
  created() {
      //在vue实例创建好后 在数据对象 方法都可用时调用 该方法
      // console.info(this.$route)
      if(this.$route.path.indexOf("home")!=-1) this.activeIndex='1';
      else if(this.$route.path.indexOf("problem")!=-1) this.activeIndex='2';
      else if(this.$route.path.indexOf("contest")!=-1) this.activeIndex='3';
      else if(this.$route.path.indexOf("status")!=-1) this.activeIndex='4';
      else if(this.$route.path.indexOf("comment")!=-1) this.activeIndex='5';
      else if(this.$route.path.indexOf("users")!=-1) this.activeIndex='6';
      else if(this.$route.path.indexOf("user/notice")!=-1)this.activeIndex = '7-3'
      else if(this.$route.path.indexOf("user/")!=-1)this.activeIndex = '7-1'
      else {
        //window.location.reload();
        this.$router.push('/main/home');

      }

    if(isLogin()){ //表示已经登录
      this.getTodayContestList();


      //防止刷新被取消，先三秒后直接获取
      setTimeout(this.getContestAnnouncement,1000*3);
      //每一分钟获取一次
      this.myVar = setInterval(this.getContestAnnouncement,1000*30);
    }


  },
  methods: {
    getContestAnnouncement(){  //获取比赛通知
      //销毁此方法
      // console.info(this.registeredContestList);
      if(!this.registeredContestList||this.registeredContestList.length==0){
        if(this.myVar)clearInterval(this.myVar);
        return ;
      }
      //开始循环获取比赛通知
      console.info("获取比赛通知"+this.registeredContestList.length);
      for(var i = 0;i <this.registeredContestList.length;i++){
        contestApi.getNewAnnouncement({"contestId":this.registeredContestList[i].contestId}).then(res=>{
          if(res.data.data){
            this.open(res.data.data.title,res.data.data.text);
          }
        })
      }
    },
    open(title,inner) {  //竞赛消息提示通知
      const h = this.$createElement;
      this.$notify.info({
        title: title,
        message: h('i', { style: 'color: teal'}, inner),
        duration: 0
      });
    },
    unLogin(){ //退出登录
      removeToken();
      window.location.reload();
    },
    homepage(){ //个人主页
      this.$router.push("/main/user/detail/"+loginUser().id);
    },
    reload(){
      window.location.reload();
    },

    isRoot(){
      return isRoot();
    },
    isLogin(){
      return isLogin();
    },
    getLoginUser(){
      return loginUser();
    },
    handleSelect(key, keyPath) {
      // console.log(key, keyPath);
      keyPath;
      // console.info(this.$route)
      if(key==1){
        this.$router.push('/main/home');
      }else if(key==2){
        this.$router.push('/main/problem');
      }else if(key==3){
        this.$router.push('/main/contest');
      }else if(key==4){
        this.$router.push('/main/status');
      }else if(key==5){
        this.$router.push('/main/comment');
      }else if(key==6){
        this.$router.push('/main/users');
      }
    },
    changeLange(lang){
      localStorage.setItem("locale",lang);
      this.$i18n.locale = lang;
    },
    // 获取今天进行中的竞赛
    getTodayContestList(){
      contestApi.getListData({ 'status':1 }).then(async res=>{
        if(res.data.data.dataList){
          var data = res.data.data.dataList;
          //获取用户已报名的比赛
          var params = {contestId:[],userId:this.getLoginUser().id};
          // console.info(data)
          for(var i = 0;i<data.length;i++){
            params.contestId.push(data[i].id);
          }
        if(data.length>0){
          // 获取已经报名的比赛
          await contestApi.getContestRegisterSearch(params).then(res1=>{
            // console.info(res1.data.data.dataList);
            if(res1.data.data.dataList){
              this.registeredContestList = res1.data.data.dataList;
            }
          })
        }

        }
      })
    },
    //格式化输出日期 yyyy-MM-dd
    getFomatterDate(to){
      var year = to.getFullYear();
      var mon = to.getMonth()+1;
      var day = to.getDate();
      // console.info(to)

      return year+'-'+mon+'-'+day;
    },
    //返回明天
    getTo(date){
      var to = new Date(date);
      var year = to.getFullYear();
      var mon = to.getMonth();
      var day = to.getDate();
      return this.getFomatterDate(new Date(year,mon,day+1));
    },
  }


}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.oj-root-main .workspace-1 .root-footer{
  height: 100px;
  width: 102%;
  background-color: #f6f6f6;
  padding: 20px;
  margin-top: 20px;
  margin-left: -2%;
  margin-right: 0px;
  font-size: 80%;
}

.oj-root-main .workspace-1{
  /*-webkit-font-smoothing: antialiased;*/
  /*-moz-osx-font-smoothing: grayscale;*/
  height: 100%;
  /* width: 100%; */
  margin: 0px;
  /* margin-right: 10px; */
  padding-left: 2%;
  padding-top: 1rem;
  background-color: #eff3f5;
  overflow: hidden;
  overflow-y: scroll;
  overflow-x: hidden;


  /* overflow: scroll; */
}
.workspace-2{
  /*margin-bottom: 150px;*/
  min-height: 90%;
}

.oj-root-main{
  height: 100%;
  width: 100%;
}

</style>
